<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="main">
        <componentdemo></componentdemo>
        <componentdemo></componentdemo>
        <componentdemo></componentdemo>
        <componentdemo></componentdemo>
        <componentdemo></componentdemo>
        <div v-html="htmlsymbal"></div>
    </div>
</body>

<script>

    //关键词 component   
    //全局注册指令
    //v-hml
    Vue.component("componentdemo", { //component-a" 组建的名称,建议是驼峰或者是短横线，驼峰方式要在脚手架中使用
        data: {
            count: 0
        },
        template: `<button @click="count++"><login></login></button>`,
        components: {
            'login': {
                template: "<h3>测试</h3>"
            }
        }
    });

    //为啥data 必须是一个函数？？？？？？？？？
    //程序在哪运行？内存
    //基础数据类型？ number  booolan 
    let num1 = 12;
    let num2 = num1;
    num2 = 20;
    console.log(num1);//12 还是 20 

    // class 也行
    let obj = {//实体才会放在堆区，obj这个变量名就存在栈区，{实体} 存在堆区，那怎么关联起来
        num1: 12
    }
    let obj2 = obj;
    obj2.num1 = 20;
    console.log(obj.num1);//12 还是20  



    let vm = new Vue({
        el: '#main',
        data: function () {
            return {
                direction: 'top',
                param1: true,
                param2: true,
                htmlsymbal: "<button>点击</button>"
            }

        },
        directives: {
            pin: {
                bind: function (el, binding, vnode) {
                    el.style.position = 'fixed'
                    var s = (binding.arg == 'left' ? 'left' : 'top') //'left' ? 'left' : 'top' 三元运算符
                    // setTimeout setInterval this 也会发生变化
                    //s = this.direction;
                    //console.log(this);
                    el.style[s] = binding.value + 'px'
                }
            }
        }
    })

// 自定义一个组件，实现 按钮点击后，div 区块的显示与隐藏


</script>

</html>